<template>
  <!-- 库存盘点列表 -->
	<div style="padding:20px 20px;"  >
		<el-card class="xiu_box">
		<div style="width:100%;height:40px;">
			 <el-select v-model="typeId" placeholder="请选择消息类型" @change="page=1;get_data()">
				 <el-option label="所有物品" value=""></el-option>
				 <el-option label="机械零件" value="1"></el-option>
				 <el-option label="办公用品" value="2"></el-option>
			 </el-select>
			 <el-input clearable @keyup.enter.native="get_data()" style="width:302px;" placeholder="输入名称搜索" v-model="names" class="input-with-select">
			   <el-button @click='get_data()' slot="append" icon="el-icon-search"></el-button>
			 </el-input>
					 <el-button @click='selects(0,false)' type="primary" style='float:right;margin-right:15px;'>添加库存</el-button>
				 </div>
				<el-table v-loading="loading" :data="tableData"  stripe style="width:100%;margin-top:20px;">
			<el-table-column header-align='center' align='center' label="类型" >
			  <template slot-scope="scope">{{id_name(scope.row.typeId,$store.state.user.leidata)}}</template>
			</el-table-column>
			<el-table-column header-align='center' align='center' prop="sku"  label="物料编码" show-overflow-tooltip></el-table-column>
					<el-table-column header-align='center' align='center' prop="name"  label="名称" ></el-table-column>
			  <el-table-column header-align='center' align='center' prop="size"  label="尺寸" ></el-table-column>
			  <el-table-column header-align='center' align='center' prop="model" label="型号" ></el-table-column>
			<el-table-column header-align='center' align='center' prop="provider" label="供应商" ></el-table-column>
			<el-table-column header-align='center' align='center' prop="amount" label="数量" ></el-table-column>
			<el-table-column header-align='center' align='center' prop="price" label="单价" >
				<template slot-scope="scope">{{scope.row.price}} ￥</template>
			</el-table-column>
			<el-table-column header-align='center' align='center' prop="remarks" label="物品备注" show-overflow-tooltip></el-table-column>
			<el-table-column header-align='center' align='center' width="300" label="操作">
				<template slot-scope="scope">
					 <el-button class='btn' @click.stop="selects(1,scope.row)" type="primary">修改</el-button>
					 <el-button class='btn' @click.stop="delect(scope.row)" type="danger">删除</el-button>
				</template>
			</el-table-column>
				</el-table>
				<!-- 分页 -->
				<el-pagination v-show="totals>sizec" style='margin-top:35px;width:100%;text-align: center;' :page-size="sizec" :total="totals" :page-sizes="ye_s"
				   background @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="total, slot, sizes, prev, pager, next, jumper">
				</el-pagination>
			</el-card>
		<addstock ref="xx" :active="isActive" :edit="edit" :datas="inve_data"></addstock>
		<!-- <record ref="ww" :details="detailsc" ></record> -->
	</div>
</template>

<script>
  import {stockData,delStock,recordStock} from '@/api_bast/stock.js'
  import addstock from '@/components/MES/stock/addstock.vue'
  import record from '@/components/MES/stock/record.vue'
	export default {
		name: '',
		data(){
			return{
				inve_data:{
					sku:'', //物流编码
					name: '', //名称
					typeId: '', //类型
					size: '', //尺寸
					model: '', //型号
					provider: '', //供应商
					amount: '', //数量
					price: '', //单价
					location: '', //位置
					upTime: '', //更新时间
					remarks:'',//备注
				},
				isActive: false,
				detailsc: false,
				edit: 0,
				names: '',//名称查询
				skus: '',//物料编码查询
				page: 1,
				sizec: 15,
				loading:false,
				totals: 0, //总条数
				tableData: [] ,//返回数据
				ye_s: [15,20],
				typeId: ''
			}
		},
		components:{
        addstock,
        record
		},
    computed:{

    },
    methods:{
      hidn(){//关闭输入框
        this.$refs.xx.active = false;
      },
      // isDetails(i){//出入库历史记录
      //     this.$refs.ww.qf()
      //     this.$refs.ww.sku = i.sku
      //     this.$refs.ww.record_jin()
      // },
      get_data(){//获取数据
        let dat = {
          name:this.names,
          pageNo:this.page,
          pageSize:this.sizec,
		  typeId: this.typeId
        }
		    console.log(dat)
        this.loading=true;
        stockData(dat).then(res => {
          this.loading = false
			  if(res.code == 200){
				  this.totals = res.resData.total;
				  this.tableData = res.resData.list;
			  }else{
				  this.totals = 0;
				  this.tableData = [];
			  }
        })
      },
      handleSizeChange(val){//每页条数改变时触发
          this.sizec = val
          this.get_data()
      },
      handleCurrentChange(val){//当前页改变时触发
          this.page = val
          this.get_data()
      },
      selects(num,i){//添加、编辑库存
          this.$refs.xx.qf()
          this.isActive = true
          this.edit = num
          if(num==0){//0就是添加，清零
            this.qing()
          }else{
            this.inve_data = i
          }
      },
      qing(){ //清空数据
        this.inve_data = {
          sku:'', //物流编码
          name: '', //名称
          typeId: '', //类型
          size: '', //尺寸
          model: '', //型号
          provider: '', //供应商
          amount: '', //数量
          price: '', //单价
          location: '', //位置
          upTime: '', //更新时间
          remarks:'',//备注
        }
      },
      delect(i){
        // console.log(i)
        this.$confirm('确定删除这条库存吗?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(()=>{
          this.loading=true
          delStock({id:i.id}).then(res=>{
            if(res.code == 200){
              this.$message({message: '删除成功',type: 'info'})
              this.get_data()
            }
            this.loading=false
          }).catch(()=>{});
        })
      }
    },
    mounted() {
      this.get_data()

    }
  }
</script>

<style scoped="scoped">
 .xiu_box{
   width: 100%;
 }
 .btnc{
   width: 90px;
   text-align: center;
 }
 .btn{
   width: 65px;
 }
</style>
